<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品月销量柱状图</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="padding-left: 30px;padding-top: 10px;font-size: 14px;color: #FF5722">
    <i class="layui-icon layui-icon-rmb" style="font-size: 14px; color: #FF5722;"></i>
    <span>销售额：</span>
    <span id="turnover" style="font-size: 20px">0</span>
    <span>元</span>
</div>

    <div id="main" style="width: 100%;height:600px;" ></div>
    <script>
        //今月
        var date=new Date();
        var mon=date.getMonth()+1;
        var yearMonth=date.getFullYear()+"-"+(mon<10?"0"+mon:mon)
        $.ajax({
            type: "GET",
            url: "order/getDayTurnover/"+yearMonth,
            success: function (res) {
                console.log(res.data)
                $('#turnover').html(res.data)
            }
        })
            $.ajax({
                type: "GET",
                url: "order/goodsMonthSalesByOrders",
                success: function (res) {
                    console.log(res.data)
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    var Ydata = [];
                    var Sdata = [];
                    // 指定图表的配置项和数据
                    option = {
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name:'商品销量',
                            nameTextStyle: {
                                color: "rgba(235, 20, 20, 1)"
                            }
                        },
                        yAxis: {
                            name:'商品名称',
                            type: 'category',
                            data: Ydata,
                            nameTextStyle: {
                                verticalAlign: "middle",
                                color: "rgba(235, 20, 20, 1)",
                                verticalAlign: "middle",
                            },
                            axisLabel:{
                                show:true,
                                formatter:function(value){
                                    var texts=value;
                                    if(texts.length>6){ // 具体多少字就看自己了
                                        texts=texts.substr(0,8)+'...';
                                    }
                                    return texts;
                                }
                            },
                        },
                        series: [
                            {
                                name: '今月销量情况',
                                data: Sdata,
                                type: 'bar',
                                label: {
                                    show: true,
                                    position: 'right',
                                    valueAnimation: true
                                }
                            }
                        ],
                    legend: {
                        show: true
                    },
                    animationDuration: 3000,
                        animationDurationUpdate: 3000,
                        animationEasing: 'linear',
                        animationEasingUpdate: 'linear'
                    };
                    for (let i=0;i<res.data.length;i++){
                        var item = res.data[i];
                        Ydata.push(item.goodstitle);
                        Sdata.push(item.sales);
                    }
                    console.log(Ydata)
                    console.log(Sdata)
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })
    </script>
</body>
</html>